<template>
  <div class="h-16 border-b border-gray-700 flex items-center justify-between px-6">
    <div class="flex items-center">
      <div class="w-8 h-8 bg-[#8153ff] rounded-full flex items-center justify-center mr-2">
        <span class="text-white text-sm">AI</span>
      </div>
      <div>
        <h2 class="font-medium">{{ title }}</h2>
        <div class="text-xs text-gray-400">{{ modelName }}</div>
      </div>
    </div>

    <div class="flex space-x-2">
      <button @click="toggleSettings" class="p-2 text-gray-400 hover:text-white hover:bg-gray-800 rounded-md">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
        </svg>
      </button>
      <button @click="toggleInfo" class="p-2 text-gray-400 hover:text-white hover:bg-gray-800 rounded-md">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: '新会话'
  },
  modelName: {
    type: String,
    default: '默认模型'
  }
});

const emit = defineEmits(['toggle-settings', 'toggle-info']);

const toggleSettings = () => {
  emit('toggle-settings');
};

const toggleInfo = () => {
  emit('toggle-info');
};
</script>

<style scoped>
</style> 